<template>
  <div>
    <pro-table v-if="visible"
        ref="tableChilrenRef"
        rowKey="id"
        :fetch="fetch"
        :columns="columns"
        :operate="operate"
        :param="state.param"
        :pagination="pagination"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
    >
    </pro-table>
    <a-empty v-else />
    <save :visible="state.visibleSave" @close="closeSave" :record="state.recordSave"></save>
    <edit :visible="state.visibleEdit" @close="closeEdit" :record="state.recordEdit"></edit>
  </div>
  <a-modal width="1000px"   v-model:visible="visibles" title="设备预约队列" @ok="handleOk" :footer="null">
    <a-card v-for="item in paperList" :key="item">
      <a-descriptions>
        <a-descriptions-item label="申请用途">{{item.standby3}}</a-descriptions-item>
        <a-descriptions-item label="申请用户">{{item.createName}}</a-descriptions-item>
        <a-descriptions-item label="预约状态">{{ item.taState }}</a-descriptions-item>
        <a-descriptions-item label="开始时间">{{item.standby1}}</a-descriptions-item>
        <a-descriptions-item label="结束时间">{{ item.standby2}}</a-descriptions-item>
      </a-descriptions>
      <a-divider />
    </a-card>
  </a-modal>
</template>
<script>
import save from "./data/save";
import edit from "./data/edit";
import { page } from "@/api/module/trainingEquipment";
import {reactive, createVNode, watch, ref, toRaw} from 'vue';
import {applyList} from "@/api/module/TrainingApply";

const removeKey = "remove";
const removeBatchKey = "removeBatch";

export default {
  props: {
      visible: {
          type: Boolean,
          default: false
      },
      record: {
          type: Object
      }
  },
  components: {
    save,
    edit,
  },
  setup(props) {

    const tableChilrenRef = ref()
    const paperList = ref([])

    watch(props,(props) => {
      console.log("实训室基本信息：",props.record)
        state.param.liId = props.record.id;
    })

    const switchFormat = { yes: true, no: false, event: function(value,record){
      record.enable = !record.enable;
      return value;
    }}
    /// 文本
    const converFormat = [{label:"正常", value:"0"},{label:"占用", value:"1"},{label:"故障", value:"2"},{label:"已申报", value:"3"}];

    const columns = [
      { dataIndex: "emName", key: "emName", title: "设备名称" },
      // { dataIndex: "emState", key: "emState", title: "设备状态" , conver: converFormat},
      { dataIndex: "emNumber", key: "emNumber", title: "设备数量" },
      { dataIndex: "lainName", key: "lainName", title: "对应实训室" },

    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await page(param);
      return {
        total: response.data.total,
        data: response.data.record,
      };
    };

    /// 行操作
    const operate = [
      { label: "预约", event: function (record) { state.visibleEdit = true, state.recordEdit = record }},
      { label: "查看", event: function (record) {
        console.log("设备列表点击查看：",toRaw(record))
          const param = {
            taName:record.id,
            standby4:record.liId,
            taType: 1,
          }
          // const param = {
          //   standby4: liId,
          //   id: id,
          //   taType: 0,
          // }
          applyList(param).then((response)=>{
            paperList.value = response.data
            console.log("详情列表+",response.data)
          });
          visibles.value = true
        }},
    ];

    const pagination = { pageNum: 1, pageSize: 3 };

    const state = reactive({
      selectedRowKeys: [],
      param: { name: "", code: "" },
      visibleEdit: false,
      visibleSave: false,
      recordEdit: {},
      recordSave: {},
    });

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeSave = function(){
      state.visibleSave = false
      tableChilrenRef.value.reload()
    }

    const closeEdit = function(){
      state.visibleEdit = false
      tableChilrenRef.value.reload()
    }

    const visibles = ref(false);


    const handleOk = e => {
      console.log(e);
      visibles.value = false;
    };

    return {
      state,
      fetch,
      columns,
      operate,
      pagination,
      onSelectChange,

      closeSave,
      closeEdit,
      visibles,
      handleOk,
      paperList,
      tableChilrenRef
    };
  },
};
</script>
